import React, { useState } from 'react';
import { Space, Table, Tag, Modal, Form, Input, Button } from 'antd';
import type { TableProps } from 'antd';
import type { FormProps } from 'antd';

function App() { 
  const [form]=Form.useForm()
  interface DataType {
    key: string;
    firstname: string;
    lastname: string;
    username: string;
  }
  const columns: TableProps<DataType>['columns'] = [
    {
      title: 'ID',
      dataIndex: 'key',
      key: 'key',
      render: (text) => <a>{text}</a>,
    },
    {
      title: 'firstname',
      dataIndex: 'firstname',
      key: 'firstname',
      render: (text) => <a>{text}</a>,
    },
    {
      title: 'lastname',
      dataIndex: 'lastname',
      key: 'lastname',
    },
    {
      title: 'username',
      dataIndex: 'username',
      key: 'username',
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <a onClick={()=>gai(record)}>修改</a>
          <a onClick={() =>del(record)}>删除</a>
        </Space>
      ),
    },
  ];
  const del=(record)=>{
    console.log('111',record)
    data.reduce(record)
    console.log(data)
    setData(data)
  }
  const gai=(key)=>{
    setIsModalOpen(true);
    console.log('222',key)
    form.setFieldsValue(key)
    console.log(data)   
  }
  const [data,setData] = useState<DataType[]>([
    {
      key: '1',
      firstname: 'John Brown',
      lastname: 'New York',
      username: '反对犯得上发生',
    },
    {
      key: '2',
      firstname: 'Jim Green',
      lastname: 'London',
      username: 'loser',
    },
    {
      key: '3',
      firstname: 'Joe Black',
      lastname: 'Sydney',
      username: 'teacher',
    },
  ])
  const [isModalOpen, setIsModalOpen] = useState(false);

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };
  const add = () => { 
    data.push({
      key: '4',
      firstname: 'dfsfsdfsfd', 
      lastname: 'efefesf',
      username:  'grgrg',
    })
    setData(data)
    console.log(data) 
  }
  type FieldType = {
    firstname?: string;
    lastname?: string;
    username?: string;
  };

  const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
    console.log('Success:', values);
  };

  return (
    <div>
      <div>
        <button onClick={add}>添加</button>
      </div>
      <Table<DataType> columns={columns} dataSource={data} />
      <Modal
        title="Basic Modal"
        closable={{ 'aria-label': 'Custom Close Button' }}
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <Form
        form={form}
          name="basic" 
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          style={{ maxWidth: 600 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          autoComplete="off"
        >
          <Form.Item<FieldType>
            label="firstname"
            name="firstname"
          >
            <Input />
          </Form.Item>

          <Form.Item<FieldType>
            label="lastname"
            name="lastname"
          >
            <Input />
          </Form.Item>
          <Form.Item<FieldType>
            label="username"
            name="username"
          >
            <Input />
          </Form.Item>

          <Form.Item label={null}>
            <Button type="primary" htmlType="submit">
              Submit
            </Button>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  )
}

export default App
